<template>
  <div class="app-container">

   <div class="filter-container">
      <el-button  class="filter-item" type="success" icon="el-icon-plus" @click="addStock('add','ruleForm')">
        添加
      </el-button>
    </div>
     
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="BannerID" min-width="150" align="center">
        <template slot-scope="scope">
            <span v-if="scope.row.bannerId === null">--</span>
            <span v-else> {{scope.row.bannerId}} </span>
        </template>
      </el-table-column>
      <el-table-column label="图片名称" min-width="200" align="center">
        <template slot-scope="scope">
            <span v-if="scope.row.title === null">--</span>
            <span v-else> {{scope.row.title}} </span>
        </template>
      </el-table-column>

      <el-table-column label="图片" min-width="150" align="center">
        <template slot-scope="scope">
            <span v-if="scope.row.imgUrl === ''">--</span>
            <viewer v-else>
              <img :src="scope.row.imgUrl " class='carImgs'>
            </viewer>
        </template>
      </el-table-column>
      
      <el-table-column align="center" prop="created_at" label="操作"  min-width="150" >
        <template scope="scope">
           <el-button type="primary" size="mini" @click="DelEdit(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
   <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"  @pagination="fetchData"/>
  
   <!-- 添加 -->
   <div class='formPosition' v-if='dialogFormVisible'>
   <div class='titleForm'>
          <div class='left_titleForm'>添加</div>
          <span class="icon iconfont right_titleForm" @click="dialogFormVisible = false">&#xe72d;</span>
   </div>
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm " :visible.sync="dialogFormVisible">
        
         <el-form-item  label="请选择banner图" >
                    <el-upload
                          action="https://njazd.com/car_api/api/imageUpload/imageUploadBanners"
                          list-type="picture-card"
                          :data="{'operate':this.operate}"
                          :on-preview="handlePictureCardPreviewBanner"
                          :on-success="handleSuccessBanner"
                          :before-remove='beforeBefRemBanner'
                          :on-remove="handleRemoveBanner"
                          :file-list="listBanner"
                          >
                          <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                          <img width="100%" :src="dialogImageUrl" alt="">
                      </el-dialog>
          </el-form-item>

     </el-form>
    </div>
   


  </div>
  
</template>

<script>
import {delBanners ,getBanners ,getUploadWeiXin ,getWeiXin ,delWeiXin ,enableWeiXin ,getADList ,delADList} from  '@/api/picture'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  data() {
    return {
      operate:'',
      listBanner:'',
      dialogImageUrl: '',
      dialogVisible: false,
      list: null,
      listLoading: true,
      total:0,
      listLoading: true,
      listQuery:{
          page: 1,
          limit: 10,
      },
      dialogFormVisible:false,
      ruleForm:{
            
      },
      cleanForm:{
          
      },
       rules: {

       }
    }
  },
  created() {
     this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const paramsData={}
      getBanners(paramsData).then(res => {
        //this.total = res.data.countNum;
        this.list =  res.data;
        this.listLoading = false
      })
    },
    addStock(formName){//处理弹出框添加和修改的状态
          this.dialogFormVisible = true;     
          this.titleName = '添加'
      },
      resetForm(formName) {
          this.ruleForm = this.cleanForm;
          this.$refs.ruleForm.resetFields();
          this.dialogFormVisible = false;  
      },
      handleSuccessBanner(response, file, fileList){
          this.fetchData()
          this.dialogFormVisible = false;
          this.$notify({
          message: '添加成功',
          type: 'success',
          duration: 2000
          })   
    },
    DelEdit(index, row ){
        const paramsData = {imgId:row.bannerId}
        delBanners(paramsData).then(res => {
              if(res.code==200){
                  this.$notify({
                    message: '删除成功',
                    type: 'success',
                    duration: 2000
                    })        
              }else{
                   this.$notify({
                    message: '删除失败',
                    type: 'error',
                    duration: 2000
                    })       
              }
              this.fetchData()
        })
    },
    beforeBefRemBanner(file, fileList){
        this.operate = file.bannerId
    },
    handleRemoveBanner(file, fileList) {//删除   banner
       const paramsData = {imgId:this.operate}
        delBanners(paramsData).then(res => {
              console.log(res)
        })
    },
      handlePictureCardPreviewBanner(file) { //回显  banner
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
     },
  }
  
}
</script>
<style lang="scss">
 .filter-container{
   margin-bottom:20px;
 }
 .el-date-range-picker{
   margin-left:220px;
 }
 .inp_search{
   width:20%;
   margin-right:1%;        
 }
 .formPosition{
    width:70%;
    height:auto;
    background:#fff;
    position:absolute;
    left:15%;
    top:5%;
    z-index:999;
    padding:30px;
    box-shadow: 0px 0px 5px 5px #eee;
    border-radius: 5px;
 }
 .demo-ruleForm{
      width:50%;     
 }
 .titleForm{
     width:100%;
     height:30px;
     line-height:30px;
     margin-bottom:20px;
     font-size:1.1em;
     font-weight: 500;
 }
 .left_titleForm{
    float:left;
 }
 .right_titleForm{
    display:block;
    float:right;
 }
 .select_roles{
    width:100%;
 }
 .carImgs{
   width:45px;
   height:45px;
   border-radius:5px;
   margin:0 3px;
 }
 .carImgs1{
   width:60px;
   height:60px;
   border-radius:5px;
   margin:0 3px;
   border:solid 1px #efefef;
 }
</style>
